<html>
	<head>
		<meta
		  name="viewport"
		  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
		/>
		<link rel="stylesheet" href="./css/size.css">
		<link rel="stylesheet" href="./css/ybplayer.css">
		<style>
			* {
			    box-sizing: border-box;
			}
			html, body {
				margin: 0;
				padding: 0;
			}
			body {
			    background-image: -webkit-linear-gradient(55deg, #e96443, #904e95);
			    background-image: linear-gradient(35deg, #e96443, #904e95);
			    width: 100vw;
			    height: 100vh;
			}
			.audio-player-content {
				width: 100%;
				height: 100%;
			}
			.audio-player-content-bg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
				opacity: 0.1;
			}
			.info {
				position: absolute;
				top: 10%;
				left: 10%;
				right: 10%;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis; 
				white-space: nowrap;
				color: #fff;
				font-size: 1.2rem;
			}
			.controls {
				position: absolute;
				left: 5%;
				right: 5%;
				top: 50%;
				transform: translateY(-50%);
				display: flex;
				align-items: center;
			}
			.controls::before {
				content: '';
				flex: 1;
				height: 1px;
				background-color: #fff;
			}
			.controls::after {
				content: '';
				flex: 1;
				height: 1px;
				background-color: #fff;
			}
			.controls .playpause {
				margin: 0 0.6rem;
				width: 12rem;
				height: 2.6rem;
				border: 1px solid #fff;
				border-radius: 2.6rem;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.controls .playpause i {
				color: #fff;
			}
			.controls .playpause .icon-play {
				font-size: 1.2rem;
			}
			.controls .playpause .icon-pause {
				font-size: 1.2rem;
			}
			.controls .playpause .tip {
				font-size: 1.1rem;
				color: #fff;
				width: 65%;
				text-align: center;
			}
			.waves {
				position: absolute;
				left: 50%;
				bottom: 10%;
				transform: translateX(-50%) rotateZ(180deg);
				display: flex;
				height: 6rem;
			}
			.wave {
				width: 0.6rem;
				background-color: aqua;
				margin: 0 0.15rem;
				background-image: linear-gradient(90deg, #80d6ff, #f441a5, #ffed3b, #8bd6ff);
				background-size: 500%;
			}
			.wave_1 {
				animation: waves 0.5s linear 0s infinite alternate;
				-webkit-animation: waves 0.5s linear 0s infinite alternate;
			}
			.wave_2 {
				animation: waves 0.3s linear 0s infinite alternate;
				-webkit-animation: waves 0.3s linear 0s infinite alternate;
			}
			.wave_3 {
				animation: waves 0.7s linear 0s infinite alternate;
				-webkit-animation: waves 0.7s linear 0s infinite alternate;
			}
			.wave_4 {
				animation: waves 1s linear 0s infinite alternate;
				-webkit-animation: waves 1s linear 0s infinite alternate;
			}
			.wave_5 {
				animation: waves 0.8s linear 0s infinite alternate;
				-webkit-animation: waves 0.8s linear 0s infinite alternate;
			}
			@keyframes waves {
				0% {
					height: 20%;
				}
				20% {
					height: 50%;
					background-position: -100% 0;
				}
				40% {
					height: 30%;
				}
				60% {
					height: 25%;
				
				}
				100% {
					height: 55%;
				}
			}
			@-webkit-keyframes waves {
				0% {
					height: 20%;
				}
				20% {
					height: 50%;
					background-position: -100% 0;
				}
				40% {
					height: 30%;
				}
				60% {
					height: 25%;
				
				}
				100% {
					height: 55%;
				}
			}
			.loading{
				position: absolute;
				left: 50%;
				bottom: 10%;
				transform: translateX(-50%);
			    width: 10rem;
			    height: 0.8rem;
			}
			.loading span{
			    display: inline-block;
			    width: 0.8rem;
			    height: 100%;
			    margin-right: 0.3rem;
			    background: lightgreen;
			    -webkit-transform-origin: right bottom;
			    -webkit-animation: load 1s ease infinite;
			}
			.loading span:last-child{
			    margin-right: 0px; 
			}
			@-webkit-keyframes load{
			    0%{
			        opacity: 1;
			    }
			    100%{
			        opacity: 0;
			        -webkit-transform: rotate(90deg);
			    }
			}
			.loading span:nth-child(1){
			    -webkit-animation-delay:0.13s;
			}
			.loading span:nth-child(2){
			    -webkit-animation-delay:0.26s;
			}
			.loading span:nth-child(3){
			    -webkit-animation-delay:0.39s;
			}
			.loading span:nth-child(4){
			    -webkit-animation-delay:0.52s;
			}
			.loading span:nth-child(5){
			    -webkit-animation-delay:0.65s;
			}
			.error {
				position: absolute;
				left: 50%;
				bottom: 10%;
				transform: translateX(-50%);
				display: flex;
				align-items: center;
			}
			.error .icon {
				position: relative;
				width: 1.2rem;
				height: 1.2rem;
				border-radius: 1.2rem;
				border: 2px solid #fff;
				color: #fff;
				text-align: center;
				font-weight: bold;
				font-family: 'Microsoft Yahei';
				margin-right: 0.6rem;
				display: inline-block;
			}
			.error .text {
				color: #fff;
			}
			.hide {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="audio-player-content" class="audio-player-content">
			<div class="audio-player-content-bg"></div>
			<div class="info"></div>
			<div class="waves hide">
				<div class="wave wave_1"></div>
				<div class="wave wave_2"></div>
				<div class="wave wave_3"></div>
				<div class="wave wave_4"></div>
				<div class="wave wave_5"></div>
				<div class="wave wave_1"></div>
				<div class="wave wave_2"></div>
				<div class="wave wave_3"></div>
				<div class="wave wave_4"></div>
				<div class="wave wave_5"></div>
				<div class="wave wave_1"></div>
				<div class="wave wave_2"></div>
				<div class="wave wave_3"></div>
				<div class="wave wave_4"></div>
				<div class="wave wave_5"></div>
			</div>
			<div class="loading">
			   <span></span>
			   <span></span>
			   <span></span>
			   <span></span>
			   <span></span>
			</div>
			<div class="error hide" onclick="reload()">
				<span class="icon">!</span>
			   <span class="text">播放失败</span>
			</div>
			<div class="controls">
				<div class="playpause" onclick="toggle()">
					<i class="ybplayerIconfont icon-play"></i>
					<span class="tip">加载中</span>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="./js/uni-webview-js@1.5.4.js"></script>
	<script type="text/javascript" charset="utf-8">
		var audio;
		window.onload = function () {
			let search = window.location.search.substring(1)
			let arr = search.split('&')
			let src,title,poster;
			for ( let i = 0; i < arr.length;i++ ) {
				let obj = arr[i].split('=')
				if ( obj[0] == 'src' ) {
					src = decodeURIComponent(obj[1])
				}
				if ( obj[0] == 'title' ) {
					title = decodeURIComponent(obj[1])
				}
				if ( obj[0] == 'poster' ) {
					poster = decodeURIComponent(obj[1])
				}
			}
			if ( src ) {
				switchAudio(src, title, poster)
			}
		}
		function switchAudio (src,title,poster) {
			stop()
			document.querySelector('.audio-player-content-bg').style.backgroundImage = poster ? 'url(' + poster + ')' : ''
			document.querySelector('.info').innerHTML = title || ''
			audio = new Audio(src)
			audio.onplay = function () {
				document.querySelector('.waves').setAttribute('class', 'waves')
				document.querySelector('.playpause').innerHTML = '<i class="ybplayerIconfont icon-pause"></i><span class="tip">正在播放</span>'
			}
			audio.onpause = function () {
				document.querySelector('.waves').setAttribute('class', 'waves hide')
				document.querySelector('.playpause').innerHTML = '<i class="ybplayerIconfont icon-play"></i><span class="tip">开始收听</span>'
			}
			audio.onloadedmetadata = function () {
				document.querySelector('.loading').setAttribute('class', 'loading hide')
				document.querySelector('.playpause').innerHTML = '<i class="ybplayerIconfont icon-play"></i><span class="tip">开始收听</span>'
			}
			audio.onloadeddata = function () {
				audio.play()
			}
			audio.onwaiting = function () {
				document.querySelector('.loading').setAttribute('class', 'loading')
			}
			audio.onplaying = function () {
				document.querySelector('.loading').setAttribute('class', 'loading hide')
			}
			audio.onerror = function () {
				document.querySelector('.error').setAttribute('class', 'error')
			}
		}
		function play () {
			audio && audio.play();
		}
		function pause () {
			audio && audio.pause();
		}
		function toggle () {
			if ( audio ) {
				if ( audio.paused ) {
					audio.play()
				} else {
					audio.pause()
				}
			}
		}
		function stop () {
			if ( audio ) {
				audio.stop()
				audio.onplay = null
				audio.onpause = null
				audio.onloadedmetadata = null
				audio.onwaiting = null
				audio.onplaying = null
				audio.onerror = null
				audio = null
				document.querySelector('.playpause').innerHTML = '<i class="ybaudioIconfont icon-play"></i>'
				document.querySelector('.waves').setAttribute('class', 'waves hide')
				document.querySelector('.loading').setAttribute('class', 'loading show')
				document.querySelector('.error').setAttribute('class', 'error hide')
			}
		}
		function prev () {
			uni.postMessage({
				data: {
					prevBtnClick: true
				}
			});
		}
		function next () {
			uni.postMessage({
				data: {
					nextBtnClick: true
				}
			});
		}
		function reload () {
			uni.postMessage({
				data: {
					reload: true
				}
			});
		}
	</script>
</html>